<template>
  <div class="swiper-container" v-if="showSwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for='item of swiperItem' :key='item.id'>
        <img :src='item.imgUrl' alt=''>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { mapState } from 'vuex'

export default {
  name: 'HomeSwiper',
  data () {
    return {
      mySwiper: null
    }
  },
  computed: {
    showSwiper () {
      return this.swiperItem.length
    },
    ...mapState(['swiperItem'])
  },
  updated () { // swiper动态加载数据要用updated  添加数据的时候 实时更新
    this.$nextTick(() => {
      this.getSwiper()
    })
  },
  methods: {
    getSwiper () {
      let that = this
      that.mySwiper = null
      this.mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        autoplay: { // 自动切换
          disableOnInteraction: false // 用户操作swiper之后,是否禁止autoplay.默认为true:停止
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      })
    }
  }
  // watch: {
  //   swiper () {
  //     // 解决swiper 4显示不出分页器问题
  //     if (this.swiperItem.length) {
  //       this.$nextTick(() => {
  //         this.mySwiper = new Swiper('.swiper-container', {
  //           loop: true, // 循环模式选项
  //           autoplay: { // 自动切换
  //             disableOnInteraction: false // 用户操作swiper之后,是否禁止autoplay.默认为true:停止
  //           },
  //           pagination: {
  //             el: '.swiper-pagination',
  //             clickable: true
  //           }
  //         })
  //       })
  //     }
  //   }
  // }
}
</script>

<style lang='stylus' scoped>
  .swiper-container >>> .swiper-pagination-bullet-active
    background: #fff!important
    opacity 1!important
  .swiper-container >>> .swiper-pagination-bullet
    opacity .6
    width 15px
    height 15px
    background gray
  .swiper-container >>> .swiper-container-horizontal > .swiper-pagination-bullets
    bottom: 16px
  .swiper-container
    margin-top 96px
    width: 100%
    height: 400px
    .swiper-wrapper
      width: 100%
      height: 100%
    .swiper-slide
      width: 100%
      height: 100%
      img
        width: 100%
        height: 100%
</style>
